<template>
  <div class="news-recommendation">
    <!-- 标题 -->
    <div class="news-header">
      <div 
        class="today-hot" 
        :class="{ active: activeTab === 'hot' }"
        @click="switchTab('hot')"
      >
        热点
      </div>
      <div 
        class="today-others-watching" 
        :class="{ active: activeTab === 'others' }"
        @click="switchTab('others')"
      >
        其他人也在看
      </div>
      <div 
        class="change-change" 
        v-show="activeTab === 'others'"
        @click="refreshOthers"
      >
        换一换
      </div>
      <div 
        class="underline" 
        :style="underlineStyle"
      ></div>
    </div>
    
    <!-- 新闻列表容器 -->
    <div class="news-list-container">
      <!-- 热点新闻列表 -->
      <ul 
        class="news-list" 
        id="hot-news"
        :style="{ left: activeTab === 'hot' ? '0' : '-100%' }"
      >
        <li 
          v-for="(value, key) in hotNews" 
          :key="key"
          class="news-item"
          @click="goToDetail(key)"
          @mouseenter="hoverItem(key, 'hot')"
          @mouseleave="resetHover"
        >
          <div class="news-title">{{ value }}</div>
        </li>
      </ul>
      
      <!-- 其他人也在看新闻列表 -->
      <ul 
        class="news-list" 
        id="others-watching-news"
        :style="{ left: activeTab === 'others' ? '0' : '100%' }"
      >
        <li 
          v-for="(item, index) in othersNews" 
          :key="index" 
          class="news-item"
          @click="goToDetail"
          @mouseenter="hoverItem(index, 'others')"
          @mouseleave="resetHover"
        >
          <div class="news-title">{{ item }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsRecommendation',
  data() {
    return {
      activeTab: 'hot',
      underlineStyle: {
        width: '0px',
        left: '0px'
      },
      hotNews: [
        "多方回应希望小学一万买单反只值六百",
        "俄方最新对华表态",
        "刚果（金）总统致信特朗普，提议用关键",
        "2025年3月24日外交部发言人郭嘉主主持",
        "轻松一刻：“朝九晚五”以前是用来形容",
        "外交部：中方从未收到所谓“杜特尔特向",
        "解读王毅三天内密集会见日方官员，中",
        "世纪婴儿去世母亲透露生病细节：发烧后",
        "非法受他人财物数额特别巨大北京市原",
        "他直言：马克龙的言论极其危险他直言：马克龙的言论极其危险他直言：马克龙的言论极其危险他直言：马克龙的言论极其危险"
      ],
      othersNews: [
        "非法受他人财物数额特别巨大北京市原非法受他人财物数额特别巨大北京市原非法受他人财物数额特别巨大北京市原非法受他人财物数额特别巨大北京市原",
        "多方回应希望小学一万买单反只值六百",
        "俄方最新对华表态",
        "刚果（金）总统致信特朗普，提议用关键",
        "2025年3月24日外交部发言人郭嘉主主持",
        "轻松一刻：“朝九晚五”以前是用来形容",
        "外交部：中方从未收到所谓“杜特尔特向",
        "解读王毅三天内密集会见日方官员，中",
        "世纪婴儿去世母亲透露生病细节：发烧后",
        "非法受他人财物数额特别巨大北京市原"
      ],
      hoverIndex: null,
      hoverType: null
    }
  },
  mounted() {
    this.initUnderline();
  },
  methods: {
    goToDetail(key){
      console.log(key);
      this.$router.push({
        name: 'detail',
        params: {news_id: key},
      })
    },
    initUnderline() {
      const hotTab = this.$el.querySelector('.today-hot');
      const rect = hotTab.getBoundingClientRect();
      const headerRect = this.$el.querySelector('.news-header').getBoundingClientRect();
      
      this.underlineStyle = {
        width: `${rect.width}px`,
        left: `${rect.left - headerRect.left}px`
      };
    },
    switchTab(tab) {
      this.activeTab = tab;
      
      this.$nextTick(() => {
        const tabElement = this.$el.querySelector(`.today-${tab === 'hot' ? 'hot' : 'others-watching'}`);
        const rect = tabElement.getBoundingClientRect();
        const headerRect = this.$el.querySelector('.news-header').getBoundingClientRect();
        
        this.underlineStyle = {
          width: `${rect.width}px`,
          left: `${rect.left - headerRect.left}px`,
          transition: 'all 0.3s ease'
        };
      });
    },
    refreshOthers() {
      // 这里可以添加刷新"其他人也在看"列表的逻辑
      console.log('刷新其他人也在看列表');
    },
    hoverItem(index, type) {
      this.hoverIndex = index;
      this.hoverType = type;
    },
    resetHover() {
      this.hoverIndex = null;
      this.hoverType = null;
    },
    getHot() {
      this.$api.serviceNews.post('api/news/hotNews')
      .then(response => {
        if (response.data.code == 200){
          console.log(response.data.data);
          console.log(typeof response.data.data);
          this.hotNews = response.data.data
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
    }
  },
  mounted() {
    this.getHot();
  }
}
</script>

<style scoped>
.news-recommendation {
  background-color: white;
  /* border-radius: 12px; */
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); */
  width: 360px;
  height: 372px;
  display: flex;
  flex-direction: column;
}

.news-header {
  font-size: 16px;
  font-weight: bold;
  color: black;
  height: 15%;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.today-hot,
.today-others-watching {
  margin-left: 10px;
  cursor: pointer;
  position: relative;
}

.underline {
  position: absolute;
  bottom: 1px;
  left: 10px;
  width: 0;
  height: 2px;
  background-color: #ff4d4f;
  transition: all 0.3s ease;
}

.news-list-container {
  height: 85%;
  position: relative;
  overflow: hidden;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  position: absolute;
  top: 0;
  transition: left 0.3s ease;
}

.change-change {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 99;
}

.change-change:hover {
  color: #ff4d4f;
}

.news-item {
  display: flex;
  align-items: center;
  margin-top: 11px;
  margin-bottom: 11px;
  margin-left: 15px;
  margin-right: 15px;
  transition: color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.news-item:hover {
  color: #ff4d4f;
  transform: translateX(5px);
}

.news-item:hover .news-title {
  color: #ff4d4f;
}

/* 修改这里，显示编号并设置宽度 */
#hot-news .news-item::before {
  content: counter(news-counter) ". ";
  font-size: 16px;
  color: #ff4d4f;
  margin-right: 6px;
  display: inline-block;
  width: 20px;
  text-align: right;
}

#hot-news {
  counter-reset: news-counter;
}

#hot-news .news-item {
  counter-increment: news-counter;
  margin-left: 7px;
}

#others-watching-news .news-item::before {
  content: "•";
  font-size: 16px;
  color: #ff4d4f;
  margin-right: 6px;
}

.news-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
</style>